<template>
  <div class="classification">
    <!-- 分类管理 -->
    <div class="title">
      <p>分类列表</p>
    </div>
    <div class="content">
      <div class="inside">
        <div class="btnarea">
          <button @click="newedit">新增</button>
          <button @click="del">删除</button>
        </div>
        <div class="down">
          <div class="left">
            <el-tree
              ref="tree"
              :data="data"
              node-key="id"
              show-checkbox
              :props="defaultProps"
              :check-strictly="true"
              default-expand-all
              @node-drag-start="handleDragStart"
              @node-drag-enter="handleDragEnter"
              @node-drag-end="handleDragEnd"
              @node-click="handleNodeClick"
              :allow-drop="allowDrop"
              :allow-drag="allowDrag"
              :expand-on-click-node="false"
              width="95%"
            >
            </el-tree>
          </div>
          <div class="right">
            <div class="list">
              <p>父级：</p>
              <el-cascader v-model="showData.id" ref="cascaderQuery" :options="options" :props="optionProps" clearable width="100%" @change="selectQuery"></el-cascader>
              <p>名称：</p>
              <el-input v-model="showData.name" placeholder="限制7个字" maxlength="7"></el-input>
              <p>小程序显示：<span>(注意：修改子级会同时修改父级显示状态)</span></p>
              <el-switch v-model="showData.isShow" active-color="#13ce66" inactive-color="#eee" @change="changeIsShow(showData.isShow)"> </el-switch>
              <p>公众号H5页面显示：<span>(注意：修改子级会同时修改父级显示状态)</span></p>
              <el-switch v-model="showData.h5IsShow" active-color="#13ce66" inactive-color="#eee" @change="changeH5IsShow(showData.h5IsShow)"> </el-switch>

              <!-- <el-select v-model="valueShow" multiple placeholder="请选择显示部分" @change="changeShowArea">
                <el-option v-for="item in showOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select> -->
              <button @click="editconfirm" v-show="edit === true">修改</button>
              <button @click="newconfirm" v-show="edit === false">确认新增</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'classification',
  data() {
    return {
      edit: false,
      showOptions: [
        {
          value: 1,
          label: '小程序'
        },
        {
          value: 2,
          label: '公众号'
        }
      ],
      valueShow: '',
      options: [],
      selRegion: [],
      showData: { id: null, name: '', isShow: true, h5IsShow: false, parentId: null },
      data: [],
      // el-tree显示字段修改
      defaultProps: {
        children: 'children',
        label: 'name',
        checkStrictly: true

      },
      // el-cascader显示字段修改
      optionProps: {
        value: 'id',
        label: 'name',
        children: 'children',
        checkStrictly: true
      },
      // 移动列表项参数
      moveOptions: {
        id: null, // 当前移动项id
        parentId: null, // 移动进入时父级的id
        orderNum: null// 当前项的在列的排序
      },
      // 新增项参数
      newData: {
        // 新增项信息
        name: '', // 名称
        orderNum: 0, // 排序
        parentId: 0, // 父级id
        isShow: false, // 是否显示在小程序
        h5IsShow: false // 是否显示在小程序
        // 父级的信息
        // parent: {
        //   id: null,
        //   name: '',
        //   orderNum: 0,
        //   parent: '', // 父级的父级名称
        //   parentId: null // 父级的父级的id
        // }
      }
    }
  },
  created() {
    // 获取分类列表
    this.getList()
    // this.edit()
  },
  methods: {
    // 选择节点时
    async handleNodeClick(val) {
      console.log('选择的节点', val)
      this.edit = true
      this.showData.id = val.id
      this.showData.name = val.name
      this.showData.isShow = val.isShow
      this.showData.h5IsShow = val.h5IsShow
      this.showData.parentId = val.parentId
    },
    // 修改分类项信息
    // async edit() {
    //   const data = {
    //     id: 50,
    //     name: '修改信息'
    //   }
    //   const res = await this.$http.post('/image/update/type', data)
    //   console.log('修改信息', res)
    // },
    // 获取分类列表
    async getList() {
      const res = await this.$http.get('/image/type/list')
      console.log('分类列表', res)
      this.data = res.data.data
      // 空数组去掉
      this.options = res.data.data || []

      for (const item of this.options || []) {
        if (!item.children || item.children.length === 0) {
          delete item.children
        } else {
          this.deepArr(item.children)
        }
      }
    },

    deepArr(data) {
      for (const item of data || []) {
        if (!item.children || item.children.length === 0) {
          delete item.children
        } else {
          this.deepArr(item.children)
        }
      }
    },
    // 筛选时的节点信息
    selectQuery() {
      // console.log('筛选节点信息', this.$refs.cascaderQuery.getCheckedNodes()[0].data)
      console.log('筛选长度', this.$refs.cascaderQuery.panel.getCheckedNodes()[0].data.id)
      // if (this.$refs.cascaderQuery.checkedValue.length === 0) {
      //   this.page.type = null
      // } else {
      //   const id = this.$refs.cascaderQuery.getCheckedNodes()[0].data.id
      //   this.page.type = id
      // }
      // 新增限制三级
      if (this.$refs.cascaderQuery.checkedValue.length === 3) {
        console.log('选了三级')
        this.$message({
          type: 'warning',
          message: '最多可添加三级，新分类将会添加到二级分类下'
        })
        return
      }
      if (this.edit === true) {
        if (this.$refs.cascaderQuery.panel.getCheckedNodes()[0]) {
          const id = this.$refs.cascaderQuery.panel.getCheckedNodes()[0].data.id
          this.showData.parentId = id
        } else {
          this.showData.parentId = 0
        }
        console.log(this.newData.parentId)
      } else {
        if (this.$refs.cascaderQuery.panel.getCheckedNodes()[0]) {
          const id = this.$refs.cascaderQuery.panel.getCheckedNodes()[0].data.id
          this.newData.parentId = id
        } else {
          this.newData.parentId = 0
        }
        console.log(this.newData.parentId)
      }
    },
    // 新增按钮
    newedit() {
      console.log('新增')
      this.edit = false
      this.showData.id = null
      this.showData.name = ''
      this.showData.isShow = true
      this.showData.h5IsShow = false
    },
    // 确认新增按钮
    async newconfirm() {
      if (
        this.showData.name === ''
      ) {
        this.$message({
          type: 'warning',
          message: '请输入分类名称',
          showClose: true
        })
        return
      }
      this.newData.name = this.showData.name
      this.$confirm('确认新增分类?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await this.$http.post('/image/save', this.newData)
          console.log('新增后台返回信息', res)
          if (res.data.code === 200) {
            this.$message({
              showClose: true,
              type: 'success',
              message: '新增成功！'
            })
            this.getList()
            this.newData.name = ''
          } else {
            this.$message.error('新增失败')
          }
        })
        .catch(() => {
          this.$message({
            showClose: true,
            type: 'info',
            message: '新增失败'
          })
        })
    },
    // 确认修改按钮
    async editconfirm() {
      console.log('xiugai ')
      if (
        this.showData.name === ''
      ) {
        this.$message({
          type: 'warning',
          message: '请输入分类名称',
          showClose: true
        })
        return
      }
      const data = {
        id: this.showData.id,
        name: this.showData.name,
        isShow: this.showData.isShow,
        h5IsShow: this.showData.h5IsShow,
        parentId: this.showData.parentId
      }
      this.$confirm('确认修改分类?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await this.$http.post('/image/update/type', data)
          // console.log('新增后台返回信息', res)
          if (res.data.code === 200) {
            this.$message({
              showClose: true,
              type: 'success',
              message: '修改成功！'
            })
            this.getList()
            this.newData.name = ''
          } else {
            this.$message.error('修改失败')
          }
        })
        .catch(() => {
          this.$message({
            showClose: true,
            type: 'info',
            message: '修改失败'
          })
        })
    },
    // 修改类别小程序显示状态
    changeIsShow(val) {
      console.log('显示状态wx', val)

      // this.$message({
      //   type: 'warning',
      //   message: ''
      // })
    },
    // 修改类别H5显示状态
    changeH5IsShow(val) {
      console.log('显示状态h5', val)

      // this.$message({
      //   type: 'warning',
      //   message: ''
      // })
    },
    // 删除节点按钮
    async del() {
      console.log('删除', this.$refs.tree.getCheckedKeys())
      const selectArr = this.$refs.tree.getCheckedKeys()
      const delarr = []
      console.log('选择的数组', selectArr)
      this.$confirm('确认删除选中的节点?', '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          selectArr.forEach((item) => {
            delarr.push(item)
          })
          const res = await this.$http.delete('/image/type', { data: delarr })
          console.log('批量删除后台返回信息', res)
          if (res.data.code === 200) {
            this.$message({
              showClose: true,
              type: 'success',
              message: '删除成功！'
            })
            this.getList()
          } else {
            this.$message.error('删除失败')
          }
        })
        .catch(() => {
          this.$message({
            showClose: true,
            type: 'info',
            message: '删除失败或未选择节点'
          })
        })
    },
    /* -------- */
    handleDragStart(node, ev) {
      console.log('drag start', node)
      this.moveOptions.id = node.data.id
      // console.log('移动项Id', this.moveOptions.id)
    },
    handleDragEnter(draggingNode, dropNode, ev) {
      console.log('tree drag enter: ', dropNode)
      this.moveOptions.parentId = dropNode.data.id
      // console.log('进入项Id', this.moveOptions.parentId)
    },
    async handleDragEnd(draggingNode, dropNode, dropType, ev) {
      console.log('tree drag end: ', dropNode, dropType)

      this.moveOptions.orderNum = 1
      const formData = new FormData()
      formData.append('id', this.moveOptions.id)
      formData.append('parentId', this.moveOptions.parentId)
      formData.append('orderNum', this.moveOptions.orderNum)
      const res = await this.$http.post('/image/order', formData)
      console.log('移动结束后台返回信息', res)
      this.getList()
    },
    // handleDrop(draggingNode, dropNode, dropType, ev) {
    //   console.log('tree drop: ', dropNode.label, dropType)
    // },
    allowDrop(draggingNode, dropNode, type) {
      return true
    },
    allowDrag(draggingNode) {
      return true
    },
    // 控制分类显示
    changeShowArea(e) {
      console.log('fenleixianshi', e)
    }
  }
}
</script>
<style>
body,
html,
#app {
  min-width: 1100px !important;
}
</style>
<style lang="less" scoped>
.classification {
  padding: 15px 20px;
  // width: 98%;
  height: 95%;
  .title {
    width: 100%;
    height: 50px;
    background-color: #eeeeee;
    p {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 50px;
      margin-left: 20px;
      margin-top: 0px;
    }
  }
  .content {
    width: 100%;
    height: 95%;
    border: 1px solid #eee;
    position: relative;
    .inside {
      width: 96%;
      height: 95%;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }
    .btnarea {
      width: 100%;
      height: 60px;
      border-bottom: 1px solid #999;
      margin-bottom: 32px;

      button {
        width: 127px;
        height: 35px;
        background: #ffffff;
        border-radius: 18px;
        border: 1px solid #333333;
        cursor: pointer;
        margin-right: 20px;
      }
    }
    .down {
      width: 100%;
      height: 80%;
      display: flex;
      justify-content: space-between;
      .left {
        width: 31%;
        height: 100%;
        overflow: auto;
        border-right: 1px solid #eee;
      }
      .right {
        width: 69%;
        height: 100%;
        .list {
          width: 427px;
          height: 100%;
          margin-left: 50px;
          /deep/.el-cascader {
            width: 100%;
          }
          p {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 20px;
          }
          span {
            font-size: 12x;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #bbb;
            line-height: 20px;
          }
          button {
            display: block;
            width: 127px;
            height: 35px;
            background: #ffffff;
            border-radius: 18px;
            margin: 0 auto;
            margin-top: 70px;
            border: 1px solid #333333;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 32px;
            cursor: pointer;
          }
        }
      }
    }
  }
}
// 修改选择框勾颜色
/deep/.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #999 !important;
  border-color: #eee !important;
}
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #999 !important;
  border-color: #eee !important;
}
</style>
